<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
    </style>
</head>
<body>
<div id="app">
    <image-upload url="../../upload.s" name="image"></image-upload>
    <hr>
    <image-upload style="height: 100px; width: 100px"
                  url="../../upload.s" name="image">
        <template #uploaded="slotProps">
            <img :src="slotProps.path" style="width: 100%; height: 100%;
                border-radius: 50%; overflow: hidden">
        </template>

    </image-upload>
</div>
<script>
    Vue.component("imageUpload",{
        template:`
        <span style="width: 100px; height: 150px; display: inline-flex;
            justify-content: center; align-items: center; font-size: 3em;
            border: 1px blue solid; cursor: pointer"
             @click="$refs.file.click()">

            <slot v-if="imagePath" name="uploaded" :path="imagePath">
                <img :src="imagePath" style="width: 100%;height: 100%;
                    object-fit: cover">
            </slot>

            <slot v-else name="empty">+</slot>

            <input type="file" ref="file" style="display: none"
                accept="image/*" @change="upload">
        </span>
        `,
        data(){return {
            imagePath : null
        }},
        props:["url", "name"],
        methods:{
            upload(){
                let fd = new FormData();
                // files 表示选中的文件数组
                fd.append(this.name, this.$refs.file.files[0]);
                axios.post(this.url, fd).then(res=>{
                    if(res.data.code == 1){
                        this.imagePath = "../../"+res.data.data;
                    } else {
                        alert(res.data.msg);
                    }
                })
            }
        }
    })
    var v = new Vue({
        el:"#app",
    })
</script>
</body>
</html>